VOS - realisatie view voor use case terrorisme/index
Home

VOS - realisatie view voor use case terrorisme/index

VOS - realisatie view voor use case terrorisme/index

Brand is opgesplitst in drie aparte use cases:
  1. bomalarm
  2. verdacht voorwerp
  3. terroristische aanslag

In deze case maken we een view waarbij de gebruiker tussen de drie mogelijkheden in geval van terreur kan kiezen.

Model

Hier is geen model voor nodig.

View

Wireframe

VOS - Wireframe Terror-Index
VOS - Wireframe Terror-Index

Wireframe naar HTML

Op basis van de wireframe maken we de view. Deze view (net zoals elke andere view) wordt als een floor geïmplementeerd op de index.html pagina (op Cloud9 is dat vos-views/index.html). Let erop dat de home knop ook omgezet wordt:

<!-- VIEWS FOR DIFFERENT KIND OF EMERGENCIES-->
<div class="floor" id="terror-index">
    <header class="front">
        <nav class="control-panel">
            <button class="tile" name="uc" value="home/index">
                <span class="icon-home"></span>
                <span class="screen-reader-text">Home</span>
            </button>
        </nav>
        <h1>veilig<br/><span>op school</span></h1>
    </header>
    <div class="show-room index" id="terror">
        <div class="tile identity">
        </div>
        <button class="tile" name="uc" value="terror/bomb-alarm">
            <span class="icon-bomb"></span>
            <span class="screen-reader-text">Bomalarm</span>
            <h1>Bomalarm</h1>
        </button>
        <button class="tile" name="uc" value="terror/suspicious-object">
            <span class="icon-suspicious-object"></span>
            <span class="screen-reader-text">Verdacht voorwerp</span>
            <h1>Verdacht voorwerp</h1>
        </button>
        <button class="tile" name="uc" value="terror/terrorist-attack">
            <span class="icon-terrorist1"></span>
            <span class="screen-reader-text">Terroristische aanslag</span>
            <h1>Terroristische aanslag</h1>
        </button>
    </div>
</div>

CSS

Het element met de klasse show-room is van het type index.

JI
2017-12-10 12:20:04